<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Bootstrap还原</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <style>
        h1{
            font-size: 6.25rem;
            line-height: 1;
            text-align:center;
            color: white;
        }

        .futitle{
            font-size:1.5rem;
            text-align: center;
            color: white;
        }

        .bigtitle{
            background-image: url(./images/2.png);
        }

        .three{
            text-align: center;
        }

        .title3{
            font-size:2rem;
            text-align: center;
            color: black;
        }

        .title4{
            font-size:1.2rem;
            text-align: center;
            color: black;
        }

        .show .card-text{
            text-align:center;
        }
        
        .foot{
            background-color: rgb(22, 22, 22);
        }

    </style>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <!-- 网站导航 -->
        <div class="row pt-3 pb-2">

            <!-- 左边 -->
            <div class="col-md-6">
                <a class="navbar-brand" href="/"><img src="./images/1.png"> Bootstrap 中文网</a>
            </div>

            <!-- 右边 -->
            <div class="col-md-6">
                <ul class="nav justify-content-end">
                    <!-- 有导航栏的 -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                         Dropdown link
                        </a>
                        <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled">Disabled</a>
                    </li>
                </ul>    
            </div>
        </div>
        <!-- 网站导航end -->

        <!-- 大标题区域 -->
        <div class="row bigtitle">
            <div class="container">
                <!-- 主标题 -->
                <div class="row mt-5">
                    <div class="col-md-12">
                        <h1>Bootstrap</h1>
                    </div>
                </div>
                
                <!-- 副标题 -->
                <div class="row mt-5">
                    <div class="col-md-12">
                        <h2 class="futitle">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
                    </div>
                </div>

                <!-- 卡片区域 -->
                <div class="row three mt-5">
                    <!-- 左边卡片 -->
                     <div class="col-md-4">
                        <div class="card text-center" style="width: 21rem;">
                            <div class="card-body">
                                <h5 class="card-title">Bootstrap v3</h5>
                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                <a href="#" class="btn btn-primary">Bootstrap v3 中文文档</a>
                            </div>
                        </div>                        
                     </div>
                    <!-- 中间卡片 -->
                    <div class="col-md-4">
                        <div class="card text-center" style="width: 21rem;">
                            <div class="card-body">
                                <h5 class="card-title">Bootstrap v4</h5>
                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                <a href="#" class="btn btn-primary">Bootstrap v3 中文文档</a>
                            </div>
                        </div>                        
                     </div>
                    <!-- 右边卡片 -->
                    <div class="col-md-4">
                        <div class="card text-center" style="width: 21rem;">
                            <div class="card-body">
                                <h5 class="card-title">Bootstrap v5</h5>
                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                <a href="#" class="btn btn-primary">Bootstrap v3 中文文档</a>
                            </div>
                        </div>                        
                     </div>
                </div>

            </div>
        </div>
        <!-- 大标题区域end -->

        <!-- 搜索区域 -->
        <div class="row search">
            <div class="container">
                <div class="row mt-5">
                    <div class="col-md-12">
                        <p class="title3">前端开源项目 CDN 加速服务</p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <p class="title4">共收录了 4387 个前端开源项目</p>
                    </div>
                </div>

                <!-- 搜索框 -->
                <div class=" row mt-3 input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">🔍</span>
                    </div>
                    <input type="text" class="form-control" placeholder="搜索开源库" aria-label="search" aria-describedby="basic-addon1">
                </div>

                <div class="row mt-5">
                    <!-- 左边卡片 -->
                    <div class="col-md-4">
                        <div class="card mb-3" style="max-width: 540px;">
                            <div class="row no-gutters">
                                <div class="col-md-4">
                                <img src="..." alt="...">
                                </div>
                                <div class="col-md-8">
                                <div class="card-body">
                                    <h5 class="card-title">稳定</h5>
                                    <p class="card-text">领先的分布式技术，确保您的网站在任何时候稳定运行。</p>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 中间卡片 -->
                    <div class="col-md-4">
                        <div class="card mb-3" style="max-width: 540px;">
                            <div class="row no-gutters">
                                <div class="col-md-4">
                                <img src="..." alt="...">
                                </div>
                                <div class="col-md-8">
                                <div class="card-body">
                                    <h5 class="card-title">快速</h5>
                                    <p class="card-text">多层优化，加速网站内容的加载速度。</p>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 右边卡片 -->
                    <div class="col-md-4">
                        <div class="card mb-3" style="max-width: 540px;">
                            <div class="row no-gutters">
                                <div class="col-md-4">
                                <img src="..." alt="...">
                                </div>
                                <div class="col-md-8">
                                <div class="card-body">
                                    <h5 class="card-title">免费</h5>
                                    <p class="card-text">免费的CDN加速服务，访问更加便捷。</p>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 搜索区域end -->

        <!-- 展示区域 -->
        <div class=" row mt-5 show">
            <div class="container">
                <!-- 第一行 -->
                <div class="row mt-3">
                    <!-- 卡片区域1 -->
                    <div class="col-md-3">
                        <div class="card" style="width: 18rem;">
                            <img src="..." class="card-img-top" alt="...">
                            <div class="card-body">
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                        </div>
                    </div>
                    <!-- 卡片2 -->
                    <div class="col-md-3">
                        <div class="card" style="width: 18rem;">
                            <img src="..." class="card-img-top" alt="...">
                            <div class="card-body">
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                        </div>
                    </div>
                    <!-- 卡片3 -->
                    <div class="col-md-3">
                        <div class="card" style="width: 18rem;">
                            <img src="..." class="card-img-top" alt="...">
                            <div class="card-body">
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                        </div>
                    </div>
                    <!-- 卡片4 -->
                    <div class="col-md-3">
                        <div class="card" style="width: 18rem;">
                            <img src="..." class="card-img-top" alt="...">
                            <div class="card-body">
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                        </div>
                    </div>                    
                </div>
                <!-- 第二行 -->
                <div class="row mt-3">
                    <!-- 卡片区域1 -->
                    <div class="col-md-3">
                        <div class="card" style="width: 18rem;">
                            <img src="..." class="card-img-top" alt="...">
                            <div class="card-body">
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                        </div>
                    </div>
                    <!-- 卡片2 -->
                    <div class="col-md-3">
                        <div class="card" style="width: 18rem;">
                            <img src="..." class="card-img-top" alt="...">
                            <div class="card-body">
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                        </div>
                    </div>
                    <!-- 卡片3 -->
                    <div class="col-md-3">
                        <div class="card" style="width: 18rem;">
                            <img src="..." class="card-img-top" alt="...">
                            <div class="card-body">
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                        </div>
                    </div>
                    <!-- 卡片4 -->
                    <div class="col-md-3">
                        <div class="card" style="width: 18rem;">
                            <img src="..." class="card-img-top" alt="...">
                            <div class="card-body">
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                        </div>
                    </div>                    
                </div>                 
            </div>
        </div>
        <!-- 展示区域end -->
        
        <!-- 页脚 -->
        <div class="row-5 foot">
            <div class="col-md-12">1</div>
        </div>









    
        </div>
    </div>





    <script src="./js/bootstrap.bundle.min.js" ></script>
    <script src="./js/bootstrap.min.js" ></script>
</body>
</html>